<template>
  <div style="width: 100%">
    <el-row type="flex" justify="space-between" align="middle" style="height: 40px;">
      <el-col :span="20">
        <span>{{ nodeData.name }}</span>
      </el-col>
      <el-col :span="4">
        <el-row type="flex">
          <!-- 两个内容 -->
          <el-col :span="12">{{ nodeData.manager }}</el-col>
          <el-col :span="12">
            <!-- 下拉菜单 element -->
            <el-dropdown @command="handleCommand">
              <span>
                操作<i class="el-icon-arrow-down" />
              </span>
              <!-- 下拉菜单 -->
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                <el-dropdown-item v-if="isMoreSelect" command="edit">编辑部门</el-dropdown-item>
                <el-dropdown-item v-if="isMoreSelect" command="del">删除子部门</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { reqDelDepartment } from '@/api/departments'
export default {
  props: {
    nodeData: {
      type: Object,
      required: true
    },
    isMoreSelect: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleCommand(command) {
      if (command === 'del') {
        this.$confirm('Are you sure？？').then(async() => {
          await reqDelDepartment(this.nodeData.id)
          this.$emit('getDepartmentsList')
          this.$message.success('删除成功！！')
        }).catch(() => {
          console.log('我取消')
        })
      }
      if (command === 'add') {
        this.$emit('openDialog', this.nodeData)
      }
      if (command === 'edit') {
        this.$emit('openDialogEdit', this.nodeData)
      }
    }
  }

}
</script>

<style>

</style>
